<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pendulums {
            font-size: 10px;
            width: 30em;
            height: 30em;
            border-top: 0.3em solid cadetblue;
            position: relative;
        }
        .pendulums div {
            position: absolute;
            width: 0.2em;
            background-color: cadetblue;
            left: 50%;
            transform-origin: 50% top;
        }
        .pendulums div::before {
            content: '';
            position: absolute;
            width: 1.5em;
            height: 1.5em;
            background: radial-gradient(
                circle at 70% 35%,
                white,
                darkturquoise 30%,
                steelblue 50%
            );
            border-radius: 50%;
            top: 100%;
            left: -0.75em;
            box-shadow: -1em 4em 1em rgba(0,0,0,0.1);
        }
        .pendulums div:nth-child(1) {
            height: 15em;
            transform: rotate(30deg);
        }
        .pendulums div:nth-child(2) {
            height: 17em;
            transform: rotate(20deg);
        }
        .pendulums div:nth-child(3) {
            height: 19em;
            transform: rotate(10deg);
        }
        .pendulums div:nth-child(4) {
            height: 21em;
            transform: rotate(0deg);
        }
        .pendulums div:nth-child(5) {
            height: 23em;
            transform: rotate(-10deg);
        }
    </style>
</head>
<body>
    <figure class="pendulums">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </figure>
</body>
</html>